<!--
 * @Description:
 * @Author: QinTianyu
 * @Date: 2020-04-30 11:33:04
 * @LastEditors: QinTianyu
 * @LastEditTime: 2020-05-06 11:30:00
 -->

 {include file="system@block/layui" /}
 <div class="box">
 <el-form  label-width="80px" :inline="true">
   <el-form-item label="操作单号" style="width:300px">
     {$formData['sn']}
   </el-form-item>
   <el-form-item label="会员">
     {$formData['user_name']}
   </el-form-item>
   <el-form-item label="收银">
     {$formData['cashier_name']}
   </el-form-item>
   <br>
   <el-form-item label="是否补录">
    {$formData['is_repair']==1 ? '是' : '否'}
  </el-form-item>
   <el-form-item label="会员卡">
     {$balance}
   </el-form-item>
   <el-form-item label="赠送会员卡">
     {$balance2}
   </el-form-item>
 
 <el-table
     :data="productData"
     border
     style="width: 100%">
     <el-table-column
       label="产品名称"
       fixed
       width="180">
       <template slot-scope="scope">
           <el-select v-model="scope.row.product_id" filterable @change="proSelect(scope.$index)" placeholder="请选择产品">
             <el-option v-for="item,idx in products" :label="item.name" :value="item.id" :key="idx"></el-option>
         </el-select>

     </template>
     </el-table-column>

     <el-table-column
     width="150"
       label="数量">
       <template slot-scope="scope">
      <!-- <el-input v-model="scope.row.num"></el-input> -->
      <el-input-number v-model="scope.row.num" size="mini" :min="0" @change="setProduct_price(scope.row, $event)"></el-input-number>
     <!-- {{scope.row.num}} -->
     </template>
     </el-table-column>


     <el-table-column
      width="120"
       label="金额">
       <template slot-scope="scope">
      <el-input v-model="scope.row.price2"></el-input>
      <!-- {{scope.row.price2}} -->
     </template>
     </el-table-column>

      <el-table-column label="顾问" width="150">
   <template slot-scope="scope">
      <el-select v-model="scope.row.adviser_id" placeholder="请选择顾问">
       <el-option v-for="item,idx in AdviserList" :key="idx" :label="item.nick" :value="item.id"></el-option>
     </el-select>
     </template>
   </el-table-column>

    <el-table-column label="美容师" width="150">
   <template slot-scope="scope">
       <el-select v-model="scope.row.technician_ids" multiple placeholder="请选择美容师" >
     <el-option
     v-for="item in TechnicianList"
     :key="item.id"
     :label="item.nick"
     :value="item.id">
     </el-option>
   </el-select>
     </template>
   </el-table-column>

 <el-table-column label="结算方式" width="150">
     <template slot-scope="scope">
         <el-select v-model="scope.row.account_id"  placeholder="请选择结算方式">
         <el-option v-for="item,idx in AccountList" :key="idx" :label="item.name"  :value="item.id">
         </el-option>
       </el-select>
       </template>
   </el-table-column>

 <el-table-column label="是否寄存" width="150">
     <template slot-scope="scope">
         <el-select v-model="scope.row.is_deposit"  placeholder="是否寄存" >
         <el-option label="带走" :value="1"></el-option>
         <el-option label="寄存" :value="2"></el-option>
       </el-select>
       </template>
   </el-table-column>

   <el-table-column label="仓库" width="150">
       <template slot-scope="scope">
           <el-select v-model="scope.row.warehouse_id"  placeholder="请选择仓库" >
           <el-option v-for="item,idx in warehouses" :label="item.name"   :value="item.id" :key="item.id">
           </el-option>
         </el-select>
       </template>
       </el-table-column>


     <el-table-column
     width="150"
       label="备注">
       <template slot-scope="scope">
      <!-- <el-input v-model="scope.row.bak"></el-input> -->
      {{scope.row.bak}}
     </template>
     </el-table-column>


  </el-table>

 <!-- <el-card class="box-card">
   <div slot="header" class="clearfix">
     <span>消费详情</span>
   </div>
   <div  class="text item">
       现金消费：{{money1}}
   </div>
   <div  class="text item">
       余额消费：{{money2}}
   </div>
   <div  class="text item">
       会员卡消费：{{money3}}
   </div>
 </el-card> -->
 <!-- <el-form-item label="审核财务">
   <el-select v-model="form.finance_id" placeholder="请选择审核财务">
     <el-option v-for="item in financeList" :label="item.nick" :value="item.id"></el-option>
   </el-select>
 </el-form-item> -->
 <br>


 <el-form-item>
   <el-button type="primary" @click="onSubmit">提交</el-button>
   <!-- <el-button>取消</el-button> -->
 </el-form-item>
 </el-form>
 </div>
 <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
 <!-- 引入样式 -->
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <!-- 引入组件库 -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
 <script>
     var mv = new Vue({
         el:'.box',
         data: {
             form: {
                  id:{$formData.id},
                  sn:'{$formData.sn}',
                  user_id:{$formData.user_id},
                  cashier_id:{$formData.cashier_id},
                  finance_id:'',
                  status:'',
               },
             financeList:{:json_encode($financeList)},
             productData: [],
             CashierList:{:json_encode($cashiers)},
             UserList:{:json_encode($userList)},
             AdviserList:{:json_encode($advisers)},
             TechnicianList:{:json_encode($technicians)},
             warehouses:{:json_encode($warehouses)},
             AccountList:{:json_encode($accounts)},
             products:{:json_encode($productList)},
         },
         created(){
           var products = {:json_encode($formData.goods)};
           console.log(products)
             for(var k = 0;k < products.length;k++){
                 this.productData.push({
                       product_id:Number(products[k].product_id),
                       name:products[k].name,
                       price1: products[k].price1,
                       price2: products[k].price2,
                       bak: products[k].bak,
                       num:Number(products[k].num),
                       is_deposit:Number(products[k].is_deposit),
                       technician_ids:products[k].technician_ids.map(x=> Number(x)),
                       adviser_id:Number(products[k].adviser_id),
                       account_id:Number(products[k].account_id),
                       warehouse_id:Number(products[k].warehouse_id) ? Number(products[k].warehouse_id) : '',
                       old_number2:Number(products[k].num),
                 });
             }
             // this.defaultProduct = this.products[0]
         },
         methods: {
           setProduct_price(item, num) {
               item.price2 = (((item.price2||0)  / (item.old_number2||1)) * num).toFixed(2)
               item.old_number2 = num
           },
             addPro:function(){
               this.productData.push({
                 product_id:Number(this.defaultProduct.id),
                 name:this.defaultProduct.name,
                 price2: this.defaultProduct.price2,
                 num:1,
                 is_deposit:1,
               });
             },

           removeItem:function(idx){
             this.productData.splice(idx,1);
           },
           proSelect:function(idx){
             var that = this;
               let row = that.products.filter(function(p){
                  return p.id === that.productData[idx].product_id;
              })[0]
                 Object.keys(row).map(key => {

                   if (key !== 'product_id') {
                     that.$set(that.productData[idx], key, row[key])
                   }
                 })

           },
           onSubmit() {
             var that = this
             var params = this.form;
             params.goods=that.productData;
             params.status = 1;
             axios.post('{:url('editDo')}', params).then(function (response) {
                 if(response.data.status === true){
                     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                     that.$message({
                         type: 'success',
                         message: response.data.message,
                         onClose: function(){
                             parent.layer.close(index); //再执行关闭
                             window.parent.location.reload();
                         }
                     })
                 }else{
                     that.$message({
                         type: 'error',
                         message: response.data.message
                     })
                 }
             }).catch(function (error) {
                 console.log(error);
             });
         },

         }
     })


 </script>
